<script setup lang="ts">
import HeadingJPEG from '@/assets/heading.jpeg'
import { useAppStore } from '@/stores/app'
import IconLeftOutlined from './icons/IconLeftOutlined.vue'
import IconRightOutlined from './icons/IconRightOutlined.vue'

const appStore = useAppStore()
</script>

<template>
  <div class="flex flex-col justify-center">
    <div class="relative flex justify-center pt-4 mb-4">
      <img class="w-96 h-10 object-contain" :src="HeadingJPEG" />
      <div class="absolute flex justify-center items-center">
        <button
          class="w-12 mr-2 text-gray-400"
          @click.stop="appStore.setPreviousPrizeLevelToCurrent"
        >
          <IconLeftOutlined />
        </button>
        <span class="text-sm text-yellow-500">{{ appStore.currentLottery.getPrizeLevel() }}</span>
        <button class="w-12 ml-2 text-gray-400" @click.stop="appStore.setNextPrizeLevelToCurrent">
          <IconRightOutlined />
        </button>
      </div>
    </div>
    <div class="text-center">
      <span class="text-yellow-500 text-lg">
        {{ appStore.currentLottery.getPrizeName() }}
      </span>
    </div>
  </div>
</template>
